<template>
  <div>
    <Row class="home-page-content" type="flex" align="middle">
      <BtnPlain type="primary" @click="goBack">返回</BtnPlain>
      <h3>短信模板</h3>
    </Row>

    <div class="home-page-content mt-20">
      <div class="com-action-table-btn">
        <Button type="primary" @click="onAdd">新建短信模板</Button>
      </div>
      <Table :columns="columns" :data="listData">
        <template slot-scope="{ row }" slot="action">
          <BtnText type="primary" @BtnClick="onEdit(row)">修改</BtnText>
          <BtnText type="error" @BtnClick="onDel(row)">删除</BtnText>
        </template>
      </Table>
    </div>

    <Modal v-model="modalFlag" width="480px" title="新建/修改短信模板" :mask-closable="false" @on-visible-change="onVisible">
      <Form ref="modalFormData" :model="modalFormData" :rules="rules">
        <FormItem label="模板标题" prop="smsTitle">
          <Input v-model="modalFormData.smsTitle" placeholder="请输入模板标题"></Input>
        </FormItem>
        <FormItem label="短信验证码" prop="smsCode">
          <Input v-model="modalFormData.smsCode" placeholder="请输入短信验证码"></Input>
        </FormItem>
        <FormItem label="短信内容" prop="smsContext">
          <Input type="textarea" :rows="4" v-model="modalFormData.smsContext" placeholder="请输入短信内容"></Input>
        </FormItem>
      </Form>
      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalFlag = false">取消</BtnPlain>
        <Button type="primary" @click="onConfirm">提交</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { smsTemplateGetPage, smsTemplateAddData, smsTemplateEditData, smsTemplateDelData } from '@/api/system.js'
export default {
  name: 'SMSTemplate',
  data () {
    return {
      columns: [
        {
          title: '模板标题',
          key: 'smsTitle',
        },
        {
          title: '短信验证码',
          key: 'smsCode',
        },
        {
          title: '短信内容',
          key: 'smsContext',
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',
        },
      ],
      listData: [],
      modalFormData: { smsTitle: '', smsCode: '', smsContext: '' },
      modalFlag: false,
      rules: {
        smsTitle: { required: true, message: '模板标题必填' },
        smsCode: { required: true, message: '短信验证码必填' },
        smsContext: { required: true, message: '短信内容必填' },
      },
      modalType: 'add'
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.listData = await smsTemplateGetPage({})
    },
    goBack (row) {
      this.$router.replace({ path: '/warningTimeSet' })
    },
    // 新增
    onAdd () {
      this.modalType = 'add'
      this.modalFlag = true
    },
    // 修改
    onEdit (row) {
      this.modalType = 'edit'
      this.modalFlag = true
    },
    onDel ({ smsCode }) {
      this.$Modal.confirm({
        title: "温馨提示",
        content: '该数据删除后不可恢复，请确认是否继续？',
        onOk: async () => {
          await smsTemplateDelData({ smsCode })
          this.$Message.success({
            background: true,
            content: '操作成功！'
          });
        },
      })
    },
    // 添加确定
    onConfirm () {
      this.$refs['modalFormData'].validate(async (valid) => {
        if (!valid) return
        const request = { ...this.modalFormData }
        if (this.modalType === 'add') {
          await smsTemplateAddData(request)
        } else {
          await smsTemplateEditData(request)
        }
        this.modalFlag = false
      })
    },
    // 重置表单状态
    onVisible (val) {
      if (!val) {
        this.$refs['modalFormData'].resetFields();
      }
    },
  }
}
</script>

<style lang='less' scoped>
.search-input {
  width: 300px;
  margin-right: 20px;
}

.mt-20 {
  margin-top: 20px;
}
</style>
